<template>
  <div class="fit-height">
  <f-placeholder
  :color="getColor"
  :transparent="transparent"
  />
  <template v-if="navbar">
    <van-nav-bar
      :title="title"
      :left-arrow="leftArrow"
      :left-text="leftText"
      :border="border"
      :style="navbgc?`background-color:${navbgc};`:''"
      :class="{custom:navbgc}"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #title v-if="hasSlot('title')">
        <slot name="title"></slot>
      </template>
      <template #left v-if="hasSlot('left')">
        <slot name="left"></slot>
      </template>
      <template #right v-if="hasSlot('right')">
        <slot name="right"></slot>
      </template> 
    </van-nav-bar>
  </template>

  <div class="page-main" :class="{'no-navbar':!navbar, 'padding':!full, overlays:overlays}">
    <slot></slot>
  </div>

  </div>
</template>

<script>
/* 
@onEnter TabPage组件滑入回调事件
@onLeave TabPage组件滑出回调事件
*/
import { computed, getCurrentInstance, inject, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import Config from '@/api/config'
export default {
  name:'tabpage',
  props: {
    title: String,//头部导航栏标题
    pagebgc: String,//页面背景色
    navbgc: String,//头部导航栏背景色
    leftArrow: {//是否显示头部导航左侧栏箭头图标
      type: Boolean,
      default: false
    },
    leftText: String,//头部导航左侧栏文字
    border: {//是否显示头部导航栏底部边框线
      type: Boolean,
      default: false
    },
    navbar: {//是否显示头部导航栏
      type: Boolean,
      default: false
    },
    overlays:{//页面是否沉浸式状态栏显示
      type: Boolean,
      default: Config.invasion
    },
    transparent: {//状态栏占位符背景是否透明
      type: Boolean,
      default: false
    },
    full: {//是否显示padding边距
      type: Boolean,
      default: false
    },
  },
  async setup(props, ctx){
    const pagesResolve = inject('pagesResolve')
    const pageActive = inject('pageActive')
    const router = useRouter()
    const self = getCurrentInstance()
    const getColor = computed(()=>{
      let _color
      if (props.navbar) {
          _color = props.navbgc || Less.navbgc
      } else {
          _color = props.pagebgc || Less.mainbgc
      }
      return _color
    })

    onMounted(()=>{//添加当前tab页监测，有更新函数则执行更新函数
      watch(pageActive, (_new, _old)=>{
        if(_new == ctx.attrs.value){
          ctx.attrs.onEnter && ctx.attrs.onEnter()
        } else if(_old == ctx.attrs.value && _new != ctx.attrs.value){
          ctx.attrs.onLeave && ctx.attrs.onLeave()
        }
        const $tar = $(self.ctx.$el)
        if(Math.abs(_new-ctx.attrs.value)>1){
          $tar.hide()
        } else {
          $tar.show()
        }
      })
    })

    await new Promise(resolve=>{
      if(pageActive.value == ctx.attrs.value){
        resolve()
      } else {
        pagesResolve[ctx.attrs.value] = resolve
      }
    })

    function onClickLeft () {
      if(!props.leftArrow || ctx.slots.left){
        return
      }
      if (ctx.attrs.onClickLeft) {
        ctx.emit('clickLeft')
      } else {
        if (window.history.length > 1) {
          router.back();
        } else {
          router.push({name:'home'});
        }
      }
    }

    function onClickRight () {
      if (ctx.attrs.onClickRight) {
        ctx.emit('clickRight')
      }
    }

    function hasSlot(name){
      return ctx.slots[name]?true:false
    }
    
    return {
      getColor,
      onClickLeft,
      onClickRight,
      hasSlot
    }
  },
}
</script>
